<template>
  <div class="wraper">
    <div class="top">
      <span class="left">特惠专区</span>
      <span class="right">查看更多></span>
    </div>
    <div class="banner">
      <img v-lazy="skill.banner" alt="">
    </div>
    <swiper v-if="load" :options="swiperOption"  ref="mySwiper" class="picwraper">  
        <swiper-slide v-for="item in skill.list" :key="item.skuId" class="pics" >
          <div class="pic">
            <img v-lazy="item.thumbnailPath">
          </div> 
          <p>{{item.skuName}}</p>
          <p class="new1">￥{{item.skPrice}}</p>
          <p class="old1">￥{{item.lPrice}}</p>
        </swiper-slide>
    </swiper> 
</div>
</template>
<script>
export default {
  props: {
    skill: {
      type: Object,
      default: {}
    },
    load:{
      type: Boolean,
      default: true
    }
  },
  mounted() {
    this.$nextTick(() => {
    });
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 3.5,
        paginationClickable: true,
        spaceBetween: 10,
        freeMode: true
      }
    };
  },
  
};
</script>
<style lang="less" scoped>
.wraper {
  width: 7.5rem;
  padding-left: 0.3rem;
  padding-top: 0.2rem;
  box-sizing: border-box;
  overflow: hidden;
  .top {
    height: 0.45rem;
    width: 7.5rem;
    margin-bottom: 0.2rem;
    padding-right: 0.3rem;
    box-sizing: border-box;
    .left {
      float: left;
      font-size: 0.32rem;
      color: #232323;
    }
    .right {
      float: right;
      font-size: 0.26rem;
      color: #707070;
      line-height: 0.45rem;
      margin-right:0.36rem;
    }
  }
  .banner {
    // height: 2.2rem;
    width: 6.9rem;
    img {

      width: 6.9rem;
    }
  }
  .picwraper {
    .pics {
      .pic {
        width: 2.01rem;
        img {
          // width: 100%;
          width: 2.01rem;
          height: 2.01rem;
          display: block;
        }
      }
      p {
        line-height: 0.33rem;
        font-size: 0.24rem;
        color: #232323;
        text-align: left;
        width: 2rem;
        margin-top:0.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
        .new1 {
          margin-top:0.1rem;
          font-size: 0.26rem;
          color: #fd6d46;
          text-align: center;
        }
        .old1 {
          font-size: 0.26rem;
          margin-top:0.1rem;
           color: #9b9b9b;
           text-align: center;
          text-decoration: line-through;
        }
    }
  }
}
</style>

